<template>
  <div class="search">
    <div class="search-header">
      <div class="search-input-container">
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索商品"
          class="search-input"
          @keyup.enter="handleSearch"
        />
        <button @click="handleSearch" class="search-btn">搜索</button>
      </div>
    </div>
    
    <div v-if="searchResults.length === 0 && !loading" class="empty-results">
      <div class="empty-icon">🔍</div>
      <p>暂无搜索结果</p>
    </div>
    
    <div v-else-if="loading" class="loading">
      <p>搜索中...</p>
    </div>
    
    <div v-else class="search-results">
      <div class="results-header">
        <span>找到 {{ searchResults.length }} 个商品</span>
      </div>
      
      <div class="product-list">
        <div 
          class="product-item" 
          v-for="(item, index) in searchResults" 
          :key="index"
          @click="goToProduct(item)"
        >
          <img :src="item.mainImage" :alt="item.name" />
          <div class="product-info">
            <h3>{{ item.name }}</h3>
            <p class="product-price">¥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchKeyword = ref('')
const loading = ref(false)
const searchResults = ref([
  { id: 1, name: 'iPhone 15 Pro', price: 7999, mainImage: '/static/images/products/iphone.jpg' },
  { id: 2, name: 'MacBook Pro', price: 12999, mainImage: '/static/images/products/macbook.jpg' },
  { id: 3, name: 'AirPods Pro', price: 1999, mainImage: '/static/images/products/airpods.jpg' }
])

const handleSearch = async () => {
  if (!searchKeyword.value.trim()) {
    alert('请输入搜索关键词')
    return
  }
  
  loading.value = true
  try {
    // 模拟搜索API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('搜索关键词:', searchKeyword.value)
    // 这里应该调用实际的搜索API
  } catch (error) {
    console.error('搜索失败:', error)
    alert('搜索失败，请重试')
  } finally {
    loading.value = false
  }
}

const goToProduct = (product: any) => {
  router.push(`/product/${product.id}`)
}
</script>

<style scoped>
.search {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-header {
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.search-input-container {
  display: flex;
  gap: 12px;
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
}

.search-input:focus {
  border-color: #007aff;
}

.search-btn {
  padding: 12px 24px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.empty-results {
  background-color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.empty-results p {
  color: #666;
}

.loading {
  background-color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.loading p {
  color: #666;
}

.search-results {
  background-color: #fff;
  margin-top: 20px;
}

.results-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.results-header span {
  color: #666;
  font-size: 14px;
}

.product-list {
  padding: 20px;
}

.product-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.product-item:hover {
  background-color: #f9f9f9;
}

.product-item:last-child {
  border-bottom: none;
}

.product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
}

.product-info {
  flex: 1;
}

.product-info h3 {
  font-size: 16px;
  color: #333;
  margin: 0 0 8px 0;
}

.product-price {
  font-size: 18px;
  color: #ff3b30;
  font-weight: bold;
  margin: 0;
}
</style> 